<template>
  <div class="bigbox">
    <div class="common-header">
      <div style="cursor: pointer" @click="back">
        <i class="vxe-icon-arrow-left" style="vertical-align: middle"></i
        ><span style="vertical-align: middle">返回</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </div>
    <div style="margin: 20px; margin-top: 60px">
      <vxe-toolbar>
        <template #buttons>
          <el-button type="primary" size="small" @click="insertEvent(-1)">增行</el-button>
        </template>
      </vxe-toolbar>
      <LowerCommon ref="common" isEdit :columns="tableColumn" />
    </div>
  </div>
</template>
<script>
import VXETable from 'vxe-table';
import LowerCommon from './common';
export default {
  components: { LowerCommon },
  data() {
    return {
      statuss: [
        { label: '禁用', value: false },
        { label: '启用', value: true },
      ],
      tableColumn: [
        //         {
        //           width: 60,
        //           slots: {
        //             default: () => {
        //               return [
        //                 <span class="drag-btn">
        //                   <i class="vxe-icon-menu"></i>
        //                 </span>,
        //               ];
        //             },
        //             header: () => {
        //               return [
        //                 <vxe-tooltip v-model={this.showHelpTip2} content="按住后可以上下拖动排序！" enterable>
        //                   <i
        //                     class="vxe-icon-question-circle-fill"
        //                     onClick={() => {
        //                       this.showHelpTip2 = !this.showHelpTip2;
        //                     }}
        //                   ></i>
        //                 </vxe-tooltip>,
        //               ];
        //             },
        //           },
        //         },
        {
          field: 'evaluationMode',
          treeNode: true,
          title: '晾晒子目/考核晾晒方式',
          editRender: {},
          slots: {
            default: 'airDryingSubcategory_default',
            edit: 'airDryingSubcategory_edit',
          },
          // slots: {
          //   edit: ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex }, h) => {
          //     return !row.parentTag
          //       ? h('vxe-input', {
          //           attrs: {
          //             value: row.airDryingSubcategory,
          //             // disabled: row.id && true,
          //           },
          //           on: {
          //             input: (e) => {
          //               row.airDryingSubcategory = e.value;
          //             },
          //           },
          //         })
          //       : h('vxe-input', {
          //           attrs: {
          //             value: row.evaluationMode,
          //             // disabled: row.id && true,
          //           },
          //           on: {
          //             input: (e) => {
          //               row.evaluationMode = e.value;
          //             },
          //           },
          //         });
          //   },
          //   default: ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex }, h) => {
          //     return !row.parentTag ? h('span', row.airDryingSubcategory) : h('span', row.evaluationMode);
          //   },
          // },
        },
        {
          field: 'assessmentInstructions',
          title: '考核晾晒说明',
          editRender: {},
          slots: { edit: 'assessmentInstructions_edit', default: 'assessmentInstructions_default' },
        },
        {
          field: 'unit',
          title: '单位',
          width: 80,
          editRender: {},
          slots: { default: 'unit_default', edit: 'unit_edit' },
        },
        //         {
        //           field: 'lineNumber',
        //           title: '行号',
        //           editRender: {},
        //           slots: { edit: 'lineNumber_edit', default: 'lineNumber_default' },
        //         },
        {
          field: 'operationField',
          title: '对应项目运营字段',
          editRender: {},
          slots: { edit: 'operationField_edit', default: 'operationField_default' },
        },
        {
          field: 'dept',
          title: '牵头责任部门',
          editRender: {},
          slots: { edit: 'dept_edit', default: 'dept_default' },
        },
        {
          title: '操作',
          slots: { default: 'operate_item' },
        },
      ],
    };
  },
  created() {
    //     this.treeDrop();
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },

    async insertEvent(row) {
      const $table = this.$refs.common.$refs.table;
      const record = {
        parentTag: null,
        tag: Date.now() + '',
        field: '',
        evaluationMode: '',
        assessmentInstructions: '',
        unit: '',
        operationField: '',
        dept: '',
      };
      const { row: newRow } = await $table.insertAt(record, row);
      await $table.setActiveCell(newRow);
    },
    getInsertEvent() {
      const $table = this.$refs.common.$refs.table;
      const insertRecords = $table.getInsertRecords();
      console.log(insertRecords);
      return insertRecords;
    },
    getRemoveEvent() {
      const $table = this.$refs.common.$refs.table;
      const removeRecords = $table.getRemoveRecords();
      console.log(removeRecords);
      return removeRecords;
    },
    getUpdateEvent() {
      const $table = this.$refs.common.$refs.table;
      const updateRecords = $table.getUpdateRecords();
      console.log(updateRecords, 123);
      return updateRecords;
    },
    async save() {
      // const insertRecords = this.getInsertEvent();
      // const updateRecords = this.getUpdateEvent();
      const removeRecords = this.getRemoveEvent();
      // await this.$api.ApiLowcostSaveOrUpdate([...insertRecords, ...updateRecords]);
      removeRecords.length > 0 && (await this.$api.ApiLowcostDeleteByIds(removeRecords.map((item) => item.id)));
      const $table = this.$refs.common.$refs.table;
      const { afterTreeFullData } = $table.$refs.xTable;
      this.$api.ApiLowcostSaveOrUpdate(afterTreeFullData).then((res) => {
        VXETable.modal.message({
          content: '保存成功',
          status: 'success',
        });
        this.$refs.common.getList();
      });
      console.log(afterTreeFullData);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

